<!DOCTYPE html>
<html>

<body>
    <div style="display: none;">
        <button onclick="sendMessage()" type="button">23</button>
    </div>
    <div class="ccomform"
        style="inset: 0px;background-color: rgba(0,0,0,0.65);position: fixed;z-index: 12;display: none;"></div>
    <div class="ccomform" style="position: fixed;inset: 0px;z-index: 13;display: none;">
        <div
            style="  border-radius: 2px; border: 1px solid #ccc;  padding: 20px;  margin: 0px auto;margin-top: 20vh;height: 130px;background-color: #f5f5f5;width: 200px;display: flex;justify-content: space-around;align-items: center;flex-direction: column;">
            <div id="messageInfo" style="padding: 12px;color: black;font-weight: 600;">确认删除？</div>
            <div class="f">
                <div class="f">
                    <button class="button" style="margin-right: 20px;" onclick="queren(true)">确认</button>
                    <button class="button3" onclick="queren(false)">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div class="tabs">
        <a class="tab active" onclick="changeTab(1)">项目配置</a>
        <a class="tab" onclick="changeTab(2)">前置操作</a>
        <a class="tab" onclick="changeTab(3)">后置操作</a>
    </div>
    <div class="content">
        <div id="1" style="height: 100%">
            <form action="" method="post" onsubmit="return false">
                <div class="form">
                    <label for="name">项目名称:</label>
                    <input type="text" id="itemName" class="inp" required>
                </div>
                <div class="form">
                    <label for="email">项目 id:</label>
                    <input type="text" id="itemId" class="inp" disabled>
                </div>

                <div class="form">
                    <label for="message">项目用户:</label><br>
                    <textarea id="users" name="message" class="inp" required></textarea>
                </div>
                <div class="f">
                    <button class="button" style="margin-right: 20px;" onclick="saveItem()">保存</button>
                    <button class="button2" onclick="delItem()">删除</button>
                </div>

            </form>
        </div>
        <div id="2" style="height: 100%;display: none;">
            <div style="width: 100vw;display: flex;height: 100%;flex-direction: row;">
                <div style="border-right: #717171 3px solid;height: 100%;width: 320px;flex-direction: column;justify-content: start;"
                    class="f before" id="bslide">

                </div>
                <div class="f"
                    style="width: 100%;padding: 12px;justify-content: start;align-items: baseline;height: 100%;overflow-y: auto;overflow-x: hidden;white-space: pre-wrap;"
                    id="bcontent">
                    点击查看数据
                </div>
            </div>
        </div>
        <div id="3" style="height: 100%;display: none;">
            <div style="width: 100vw;display: flex;height: 100%;flex-direction: row;">
                <div style="border-right: #717171 3px solid;height: 100%;width: 320px;flex-direction: column;justify-content: start;"
                    class="f after" id="aslide">

                </div>
                <div class="f"
                    style="width: 100%;padding: 12px;justify-content: start;align-items: baseline;height: 100%;overflow-y: auto;overflow-x: hidden;white-space: pre-wrap;"
                    id="acontent">
                    点击查看数据
                </div>
            </div>
        </div>

    </div>
</body>
<script>
    const vscode = acquireVsCodeApi()
    function sendMessage() {
        const message = {
            command: 'showMessage',
            text: 'Hello from HTML!'
        };
        vscode.postMessage(message);
    }
    var itemInfo = {}
    window.addEventListener('message', event => {
        const message = event.data;
        console.log(message)
        // 处理来自插件的消息
        if (message.command == 'itemInfo') {

            loadItemInfo(message.da)
            showBeforeAfter()
        }
    });

    // 在 HTML 加载完成后通知插件进行初始化
    window.addEventListener('DOMContentLoaded', () => {
        vscode.postMessage({ command: 'itemInit' });
    });
    var ccomform_callback = null
    function ccomform(open, callback) {
        let dd = 'none';
        if (open) {
            dd = 'block';
        }
        let cc = document.getElementsByClassName('ccomform');
        cc[0].style.display = dd;
        cc[1].style.display = dd;
        ccomform_callback = callback
    }
    function queren(st) {
        if (st && ccomform_callback) {
            try {
                ccomform_callback()
            } catch (err) {
                console.log(err)
            }
        }
        ccomform(false)
    }

    // 一下是页面逻辑
    var nowTab = '1'
    function changeTab(tabIndex) {
        if (tabIndex == nowTab) {
            return
        }
        nowTab = tabIndex + ''
        const tabs = document.getElementsByClassName('tab');
        for (let i = 0; i < tabs.length; i++) {
            tabs[i].classList.remove('active');
        }
        tabs[tabIndex - 1].classList.add('active');
        const l = ['1', '2', '3']
        for (var x in l) {
            if (l[x] == tabIndex) {
                document.getElementById(l[x]).style.display = 'block'
            } else {
                document.getElementById(l[x]).style.display = 'none'
            }
        }


    }
    function saveItem() {
        const name = document.getElementById('itemName').value
        const users = document.getElementById('users').value
        const idd = document.getElementById('itemId').value

        if (name == itemInfo.name && users == itemInfo.users) {
            vscode.postMessage({ command: 'message', content: "保存成功！" });
        } else {
            vscode.postMessage({ command: 'changeItem', da: { name, users, idd } });
        }


    }
    function delItem() {
        ccomform(true, () => {
            const idd = document.getElementById('itemId').value
            vscode.postMessage({ command: 'delItem', da: { idd } });
        })
    }
    function showBeforeAfter() {
        const st = '<div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px" class="f kuang" id="$id" onclick="showDetail($index,\'$id\',\'$position\')"><span style="margin-left: 4px;">$name</span><div class="f" style="flex:1"></div>'
        const edit = '<a style="user-select: none;margin-right: 4px;font-size: 12px;"  onclick="showcontent($index,\'$id\',\'$position\')" >编辑</a>'
        const yong = '<a style="user-select: none;margin-right: 4px;font-size: 12px;display:$display;" class="qiyong" onclick="shiyong(true,\'$position\',\'$id\')" >启用</a>'
        const jinyong = '<a style="user-select: none;margin-right: 4px;font-size: 12px;display:$display;" class="jinyong" onclick="shiyong(false,\'$position\',\'$id\')" >禁用</a>'
        const end = '<a style="user-select: none;margin-right: 4px;font-size: 12px;" onclick="showDetail($index,\'$id\',\'$position\')">查看</a></div>'
        var bstring = ''
        for (var i = 0; i < itemInfo.before.length; i++) {
            const da = itemInfo.before[i]
            bstring += st.replace('$id', da.id).replace('$name', da.name).replace('$index', i).replace('$id', da.id).replace('$position', 'before');
            if (da.edit) {
                bstring += edit.replace('$index', i).replace('$id', da.id).replace('$position', 'before')
                

            }
            if(!da.id.endsWith('_inner')){
                if (!da.status) {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                } else {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                }
            }
            bstring += end.replace('$index', i).replace('$id', da.id).replace('$position', 'before');
        }
        document.getElementById('bslide').innerHTML = bstring;
        // 以上是前置
        bstring = ''
        for (i = 0; i < itemInfo.after.length; i++) {
            const da = itemInfo.after[i]
            bstring += st.replace('$id', da.id).replace('$name', da.name).replace('$index', i).replace('$id', da.id).replace('$position', 'after');
            if (da.edit) {
                bstring += edit.replace('$index', i).replace('$id', da.id).replace('$position', 'after')
                

            }
            if(!da.id.endsWith('_inner')){
                if (!da.status) {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                } else {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                }
            }
            bstring += end.replace('$index', i).replace('$id', da.id).replace('$position', 'after');
        }
        document.getElementById('aslide').innerHTML = bstring;
    }
    function loadItemInfo(da) {
        itemInfo = da
        document.getElementById('itemName').value = da.name
        document.getElementById('itemId').value = da.id
        document.getElementById('users').value = da.users
        console.log('loadItemInfo', da);
    }
    function shiyong(st, position, id) {
        if (!st) {
            document.getElementById(id).getElementsByClassName('qiyong')[0].style.display = 'block'
            document.getElementById(id).getElementsByClassName('jinyong')[0].style.display = 'none'
        } else {
            document.getElementById(id).getElementsByClassName('qiyong')[0].style.display = 'none'
            document.getElementById(id).getElementsByClassName('jinyong')[0].style.display = 'block'
        }
        vscode.postMessage({ command: 'setStatus4ab', da: { position: position, id, tid: itemInfo.id, status: st } });
    }
    function showcontent(index, id, position) {
        const da = itemInfo[position][index]
        let con = da.content
        if (da.id != id) {
            for (var i = 0; i < itemInfo[position].length; i++) {
                const da2 = itemInfo[position]
                if (da2.id == id) {
                    con = da2.content;
                    break;
                }
            }
        }
        let name='后置脚本'
        if(position == 'before'){
            name='前置脚本'
        }
        vscode.postMessage({ command: 'openTmpFile',da:{name,content:con,id} });
    }
    function showDetail(index, id, position) {
        const da = itemInfo[position][index]
        if (da.id == id) {
            if (position == 'before') {
                document.getElementById('bcontent').textContent = da.content
            } else {
                document.getElementById('acontent').textContent = da.content
            }
        } else {
            let con = '数据错误'
            for (var i = 0; i < itemInfo[position].length; i++) {
                const da2 = itemInfo[position]
                if (da2.id == id) {
                    con = da2.content;
                    break
                }
            }
            if (position == 'before') {
                document.getElementById('bcontent').textContent = con
            } else if (position == 'after') {
                document.getElementById('acontent').textContent = con
            } else {
                console.error('showDetail 数据错误')
            }
        }
        const k = document.getElementsByClassName(position)[0]?.getElementsByClassName('kuang')
        if (k) {
            for (i = 0; i < k.length; i++) {
                const kk = k[i];
                if (kk.id == id) {
                    kk.style.border = '1px solid #007BFF'
                    kk.style.color='#006aee'
                } else {
                    kk.style.border = '1px solid var(--vscode-editor-foreground)'
                    kk.style.color='var(--vscode-editor-foreground)'
                }
            }
        }

    }

</script>
<style>
    body {
        font-family: Arial, sans-serif;
    }

    .f {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tabs {
        display: flex;
        justify-content: start;
        padding: 4px 20px;
        align-items: center;
        border-bottom: 1px solid var(--vscode-editor-foreground);
        height: 24px;
        position: fixed;
        width: 100vw;
        z-index: 99;
        top: 10px;
    }

    .tab {
        margin: 0px 8px;
        padding: 4px 8px;
        margin-bottom: -3px;
        font-weight: 400;
        font-size: 15px;
        user-select: none;

    }

    a {
        cursor: pointer;
    }

    .tab.active {
        border-bottom: 4px solid #0056a3;
        margin-bottom: -4px;
        font-weight: 500;
    }

    .content {
        /* padding: 24px 20px; */
        display: flex;
        width: calc(100vw - 50px);
        height: calc(100vh - 80px);
        /* overflow-x:hidden; */
        padding-top: 50px;
        /* margin-top: 40px; */
    }

    .form {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
        margin: 16px 4px;
    }

    .form label {
        width: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .inp {
        width: 50vw;
        line-height: 32px;
    }

    .button {
        display: inline-block;
        padding: 4px 20px;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }

    .button2 {
        display: inline-block;
        padding: 4px 20px;
        background-color: #fafafa;
        color: red;
        border: 1px solid red;
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }

    .button3 {
        display: inline-block;
        padding: 4px 20px;
        background-color: #fafafa;
        color: #0056b3;
        border: 1px solid #0056b3;
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }

    .button:hover {
        background-color: #0056b3;
    }

    .button3:hover {
        background-color: #0066b4;
    }
    input {
        height: 28px;
        line-height: 28px;
        background-color: transparent;
        color: var(--vscode-editor-foreground);
        border: 0px;
        border-bottom: 1px solid var(--vscode-editor-foreground);
    }

    textarea {
        height: 28px;
        line-height: 28px;
        background-color: transparent;
        color: var(--vscode-editor-foreground);
        border: 0px;
        border-bottom: 1px solid var(--vscode-editor-foreground);
        resize: vertical;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>

</html>